<template>
	<view>
		<!-- <u-navbar :is-back="false" backIconColor="#ffffff"  :immersive="true" :background="background" title="CFD收益">
		</u-navbar> -->
		<u-navbar :is-back="false" :background="background"  title-color="#ffffff"  :immersive="true" title="CFD收益" >
			<view class="menu">
				<i class="icon iconfont icon-caidanzhankai" @tap.stop="shownavs"></i>
			</view>
		</u-navbar>
		<!-- <u-popup :show="showNav" @close="close" 
		 :round="10" mode="top" 
		 :safeAreaInsetBottom="true" 
		>12321 -->
		<u-popup v-model="showNav" mode="left"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
			<view class="nav-conte">
				<view class="nav-log">
					<image src="/static/logo.png" mode="widthFix" lazy-load></image>
				</view>
				<!-- <view class="nav-item">MOBI</view> -->
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="clickBullentin"><image src="../../static/shouye.png" mode="widthFix"></image>首页</view>
				
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(0)"><image src="../../static/Rrl_s_089.png" mode="widthFix"></image>CFD</view>
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(2)"><image src="../../static/yuqishouyi.png" mode="widthFix"></image>CFD收益</view>
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(3)"><image src="../../static/bangding.png" mode="widthFix"></image>{{isBind?'已绑定':'未绑定'}}</view>
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(1)"><image src="../../static/My.png" mode="widthFix"></image>我的</view>
			</view>
		</u-popup>
		<view class="income-top">
			<image src="../../static/image/income-top-bg.png" mode="widthFix" class="income-top-img" lazy-load></image>
			<view class="income-top-t">
				<image src="../../static/image/shouyi-bg.png" mode="widthFix" lazy-load class="income-top-t-bg"></image>
				<view class="income-top-content">
					<view class="income-top-t-l">
						<text>累计收益</text>
						<view class="">
							{{ljsy || 0}}
						</view>
					</view>
					<view class="income-top-t-l">
						<text>今日收益</text>
						<view class="">
							{{jrsy || 0}}
						</view>
					</view>
				</view>
			</view>
			<view class="income-content">
				<view class="income-content-l">
					<!-- <image src="../../static/image/income-feneli.png" mode="widthFix" lazy-load></image> --><view class="charts-box">
					<qiun-data-charts
						type="pie"
						:chartData="chartData"
						:loadingType="0"
						:echartsH5="false"
						:disableScroll="true"
						background="none"
						:animation="false"
						:tooltipShow="true"
						:title="''"
						:subtitle="''"
						:dataLabel="false"
						:tapLegend="false"
					  />
					  </view>
					<view>当月总收益:{{dysy || 0}}</view>
				</view>
				
				<view class="income-conten-r">
					<block v-for="(item,index) in list" :key="index">
					<view class="income-conten-r-l">
						{{item.title}}
					</view>	
					</block>
					
					<!-- <view class="income-conten-r-l">
						社区CFD
					</view>
					<view class="income-conten-r-l">
						推销收益
					</view> -->
					<button @tap.stop="getTeam">
						<text>社群管理</text>
					<image src="../../static/image/button-blue.png" mode=""></image>
					</button>
				</view>
			</view>
			
			
			
		</view>

		<view class="income-list">
			<view class="income-list-nav">
				<block v-for="(item,index) in list" :key="index">
					<view class="income-list-nav-l" @tap.stop="chooseNav(index)" :class="{'active':navIndext==index}">
						{{item.title}}
					</view>
				</block>
				
				<!-- <view class="income-list-nav-l" @tap.stop="chooseNav(1)" :class="{'active':navIndext==1}">
					推销收益
				</view>
				<view class="income-list-nav-l" @tap.stop="chooseNav(2)" :class="{'active':navIndext==2}">
					社区收益
				</view> -->
			</view>  
			<block v-for="(item,index) in lists" :key="index">
				<view class="income-item">
					<view class="income-item-l">
						<view>{{item.hash || ''}}<text>{{item.typeStr || ''}}</text></view>
						<text>{{item.time}}</text>
					</view>
					<view class="income-item-r">
						<text>{{item.status}}</text>
						<view>+{{item.num}}</view>
					</view>
				</view>
			</block>
			
		</view>
<u-popup v-model="showPopuleAver" mode="center"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
		 <scroll-view scroll-y="false">
			<view class="popu-buy popu-buy-other">
				<view class="popule-close" @tap.stop="showPopuleAver=false">
					<image src="../../static/cha.png" mode="widthFix" lazy-load></image>
				</view>
				<view class="popu-buy-ti">
					请先绑定上级
				</view>
				<view class="popu-buy-content">
					<view class="popule-item">
						<input type="text" v-model="refer"  placeholder="请输入上级地址">
					</view>
				</view>
				<view class="popu-buy-b popu-buy-b-other">
					<!-- <button @tap.stop="showPopuleAver=false">取消</button> -->
					<button hover-class="hover-transform1" @tap.stop="buyRefer">确定</button>
				</view>
			</view>
			</scroll-view>
		</u-popup>
		<u-top-tips ref="message" :type="types"  zIndex="999" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
	</view>
</template>

<script>
	import qiunDataCharts from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	import {pageto, showToast, fetch, _updataTabBar, forceUpdate} from '@/common/js/util.js';
	import {mapGetters,mapMutations} from "vuex";
	export default {
		components:{
			qiunDataCharts
		},
		computed:{
			formatParsefloat(val){
				if ((!val && val != 0) || val == null || val == undefined || val == 'undefined') {
					return 0
				}
				return parseFloat(val)
			},
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getLogin',
				'getLoginInfo',
				'getTextArr',
				'getIsLogin',
				'getIsBind'
			]),
		},
		onShow(){
			this.isBind =this.getIsBind;
			this.showNav=false
			this.getList()
			// // #ifdef APP-PLUS
			// forceUpdate(this.getLangType);
			// // #endif
			// _updataTabBar(this.getTextArr,this.getLangType);
			this.navIndext = 0
		
		},
		data() {
			return {
				showNav:false,
				background:'#334bf3',
				navIndext:0,
				ljsy:'',
				jrsy:'',
				dysy:'',
				list:[],
				type:'',
				lists:[],
				page:1,
				chartData:{},
				showPopuleAver:false,
				refer:'',
				isBind:false,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				types:'',
			};
		},onLoad(){
			
		},
		onReachBottom(){
			this.getHistory()
		},
		methods:{
			...mapMutations(['setInTeam', 'setIsBind']),
			async buyRefer(){
				this.showPopule = false;
				// this.showPopule1 = true;
				
				await fetch('/api/user/referBind',{address:this.getLoginInfo.address,refer:this.refer},'post').then(res=>{
					this.showPopuleAver = false;
					this.refer=''
					this.showTips(res.data.msg,'error')
					if(res.data.code==1){
						// this.getUser()
						this.setIsBind(true)
						this.showTips(res.data.msg,'success')
						// this.indexInfo = res.data.data
					}else if(res.data.code==0){
						setTimeout(()=>{
							this.showPopuleAver = true;
						},1000)
					}
				})
			},
			showTips(msg,type) {
				// <!-- type值可选的有primary(默认)、success、info、warning、error -->
				this.$refs.message.type=type
				this.$refs.message.show({
					title: msg
				});
			},
			shownavs(){
				// console.log('q3eq2',this.showNav);
				this.showNav =true
			},
			chooseNav(index){
				this.navIndext = index
				this.lists =[]
				this.page=1
				this.type = this.list[index].type
				this.getHistory()
			},
			clickBullentin() {
				uni.reLaunch({
					url:'/pages/index/index'
				})
				return
				this.showNav=false
				let e = this.noticeList[0]
				// console.log(e);
				// return
					this.setBulletin('')
					// // console.log(e) 没有title content time 是不会显示出来的
					this.setBulletin(e);
					uni.navigateTo({
						url:'/pages/index/detail'
					})
				},
			getQz(index){
				this.showNav=false
				if(index==1){
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					return
				}else if(index==2){
					uni.reLaunch({
						url:'/pages/income/income'
					})
					return
				}else if(index==3){
					if(this.isBind)return
					this.showPopuleAver =true;
					return
				}
				
				uni.reLaunch({
					url:'/pages/Polymeric/index'
				})
				// if(this.indexInfo.bps){
				// 	// #ifdef APP-PLUS
				// 	setTimeout(()=>{
				// 		plus.runtime.openURL(this.indexInfo.bps);
				// 	}, 500)	
				// 	// #endif
				// 	// #ifdef H5 
				// 	window.location.href=this.indexInfo.bps
				// 	// #endif
				// }
			},
			getTeam(){
				this.setInTeam(true)
				pageto('/pages/team/team');
			},
			async getHistory(){
				
				await fetch('/api/User/detailed',{page:this.page,rows:20,type: this.type},'post').then(res=>{
					let type = this.type?this.type:this.list[0].type
					if(res.data.data.data.data.length ==0){
						uni.hideNavigationBarLoading();
						return;
					}
					if(res.data.code){
						res.data.data.data.data.forEach((item,index)=>{
							item.poundage=Number(parseInt(item.poundage))
						})
						if(this.page ==1){
							this.page ++;
							uni.stopPullDownRefresh();
							this.lists = res.data.data.data.data;
							
						}else{
							this.page ++;
							let lists = res.data.data.data.data;
							lists.forEach((item,index)=>{
								// lists[index].num = parseFloat(item.num)
								// item.amount = parseFloat(item.amount)
								// lists[index].pcs = _self.i18n.BlockPackage
							})
							// this.day_sum = res.data.data.day_sum+"";
							this.lists = this.lists.concat(lists)
							// // console.log(this.lists)
						}
					}else{
						// uni.showToast(res.data.msg)
					}
				})
			},
			async getList(){
				await fetch('/api/user/jl',{},'post').then(res=>{
					if(res.data.code==1){
						this.ljsy = res.data.data.ljsy
						this.jrsy = res.data.data.jrsy
						this.dysy = res.data.data.dyzsy
						this.list =  res.data.data.zd_type
						this.lists =[]
						this.page=1
						this.getHistory()
						this.chartData={
								  categories:[],
								  series: [{
										data: [{
											value:this.list[0].ljhd?this.list[0].ljhd:0,
											name:this.list[0].title
										},{
											value:this.list[1].ljhd?this.list[1].ljhd:0,
											name:this.list[1].title
										},{
											value:this.list[2].ljhd?this.list[2].ljhd:0,
											name:this.list[2].title
										}],
										}],
										}
						// this.list.forEach((item,index)=>{
						// 	this.chartData.series.data[index].value=item.ljhd
							
						// })
						// console.log(this.chartData);
						return
						this.chartData={
								  categories:[],
								  series: [{
										data: [
										  {
											name: "提取冻结",
											value:  parseFloat(freeze)
										  }, {
											name: "质押资产",
											value:   parseFloat(giving)
										  }, {
											name: "可用资产",
											value:   parseFloat(balance)
										  }
										]
						  }]
						}
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background: #f3f5f6 !important;
	}
</style>
<style lang="scss" scoped>
	@import '@/common/scss/variable.scss';
	.popu-buy{
		background: $white;
		border-radius: 20rpx;
		color: #666;
		width:500rpx;
		&.popu-buy-other{
			width:600rpx;
			position: relative;
			.popule-close{
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					flex-shrink: 0;
				}
			}
		}
		.popu-buy-content{
			padding: 0 30rpx;
			.popule-item{
				
				border: 1rpx solid #e7eaf4;
				padding: 0 20rpx;
				input{
					height: 88rpx;
					line-height: 88rpx;
				}
			}
		}
		&.popu-buy-other{
			max-height: 650rpx;
			position:relative;
		}
		.close-icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index:999;
		}
		.popu-buy-t{
			// line-height: 100rpx;
			margin:30rpx 0;
			border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			padding: 50rpx 100rpx 0;
			word-wrap:break-word;
		}
		.popu-buy-ti{
			padding: 50rpx 0 0;
			margin:30rpx 0;
			// border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
		}
		.popu-buy-p{
			padding: 30rpx 40rpx;
			.p{
				word-wrap:break-word;
				width: 500rpx;
				font-size: 28rpx;
			}
		}
		.popu-buy-c{
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.popu-buy-b{
			word-wrap:wrap;
			padding: 30rpx 40rpx;
			display: flex;
			align-items: center;
			
			button{
				flex: 1;
				border-radius: 8rpx;
				color: #666;
				line-height: 88rpx;
				height: 88rpx;
				font-size: 28rpx;
				background: #f3f5f6;
				&:first-of-type{
					margin-right: 40rpx;
					color: #666;
				}
				&:last-of-type{
					color: #fff;
					background: #334bf3;
				}
			}
			&.popu-buy-b-other{
				button{
					&:first-of-type{
						margin-right: 0;
						// color: #666;
					}
				}
				
			}
		}
	}
	.menu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
	}
	.nav-conte{
		width: 400rpx;
		padding: 150rpx 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #334bf3;
		.nav-log{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			// border: 1rpx solid #fff;
			margin-bottom: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}
		}
		.nav-item{
			background: rgba(255, 255, 255, 0.1);
			width: 400rpx;
			// padding: 0 30rpx;
			line-height: 88rpx;
			// border-bottom: 1rpx solid #e7eaf4;
			margin-bottom: 2rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 60rpx;
			image{
				width: 70rpx;
				height: 70rpx;
				margin-right: 30rpx;
			}
		}
	}
	.income-top{
		width: 670rpx;
		margin: 0 auto;
		position: relative;
		padding: 30rpx 26rpx;
		.income-top-img{
			width: 670rpx;
			height: 624rpx;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			// z-index: -1;	
		}
		.income-top-t{
			position: relative;
			width: 614rpx;
			height: 162rpx;
			padding-top: 30rpx;
			.income-top-t-bg{
				position: absolute;
				left: 0;
				top: 0;
				width: 614rpx;
				height: 162rpx;
				right: 0;
				bottom: 0;
				// z-index: -1;
			}
			.income-top-content{
				display: flex;
				align-items: center;
				.income-top-t-l{
					position: relative;
					flex: 1;
					color: $white;
					text-align: center;
					&::after{
						content: "";
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 2rpx;
						height: 60rpx;
						background: rgba($color: #E7EAF4
, $alpha: 0.2);
					}
					text{
						font-size: 30rpx;
					}
					view{
						margin-top: 14rpx;
						font-size: 46rpx;
						font-weight: bold;
						line-height: 52rpx;
					}
				}
			}
		}
		.income-content{
			display: flex;
			align-items: center;
			// padding-top: 120rpx;
			.income-content-l{
				width: 284rpx;
				.charts-box{
				  width:300rpx;
				  // height:300px;
				  // margin-left: -80rpx;
				}
				// image{
				// 	width: 284rpx;
				// 	height: 268rpx;
				// 	margin-bottom: 32rpx;
				// }
				view{
					margin-top: -70rpx;
					font-size: 26rpx;
					color: #596073;
					text-align: center;
				}
			}
			.income-conten-r{
				
				display: flex;
				align-items: center;
				flex-direction: column;
				.income-conten-r-l{
					padding-left: 108rpx;
					font-size: 30rpx;
					color: #191B27;
					padding-bottom: 30rpx;
					position: relative;
					&::after{
						position: absolute;
						left: 82rpx;
						top: 4rpx;
						// transform:;
						width: 12rpx;
						content: "";
						height: 12rpx;
						border-radius: 6rpx;
					}
					&:nth-child(1){
						&::after{
							background: #2952F5;
						}
					}
					&:nth-child(2){
						&::after{
							background: #0FCE8B;
						}
					}
					&:nth-child(3){
						&::after{
							background: #EA5745;
						}
					}
					&:nth-child(4){
						&::after{
							background: #9A60B4;
						}
					}
					
				}
				button{
					margin: 0 0 0 auto;
					width: 174rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: $white;
					text-align: center;
					position: relative;
					background: transparent;
					font-size: 24rpx;
					border: none;
					overflow: inherit;
					text{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						z-index: 2;
						width: 130rpx;
						display: block;
					}
					&::after{
						display: none;
					}
					image{
						width: 240rpx;
						height:90rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						// z-index: -1;
					}
				}
			}
		}
		
		
		
	}
	
	.income-list{
		margin: 80rpx 30rpx 20rpx;
		background: $white;
		border-radius: 20rpx;
		min-height: 450rpx;
		padding: 0 29rpx;
		.income-list-nav{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.income-list-nav-l{
				font-size: 28rpx;
				color: #9EA4BA;
				line-height: 94rpx;
				&.active{
					color: #191B27;
					position: relative;
					&::after{
						content: "";
						position: absolute;
						left: 50%;
						bottom: -3rpx;
						transform: translateX(-50%);
						width: 70rpx;
						height: 6rpx;
						border-radius: 6rpx;
						background: #2952F5;
					}
				}
			}
		}
		.income-item{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E7EAF4;
			padding: 30rpx 0 10rpx;
			justify-content: space-between;
			.income-item-l{
				view{
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #191B27;
					line-height: 52rpx;
					text{
						margin-left: 8rpx;
					}
				}
				text{
					font-size: 26rpx;
					color: #9EA4BA;
					display: block;
					line-height: 40rpx;
				}
			}
			.income-item-r{
				text-align: right;
				text{
					font-size: 26rpx;
					color: #9EA4BA;
					display: block;
				}
				view{
					margin-top: 15rpx;
					font-size: 36rpx;
					color: #EA5745;
				}
			}
		}
	}
	
	
	
</style>
